<template>
	<view class="container">
		<u-navbar class="container_nav" :border-bottom="false" title="积分充值" :background="{ background: 'transparent' }"
			title-color="#fff" back-icon-color="#fff"></u-navbar>
		<view class="container_image">
			<view class="u-font-60">
				{{data.member_points}}
			</view>
			<view class="u-m-t-20">
				我的积分
			</view>
		</view>
		<view class="container_main" :style="{paddingTop:data.height}">
			<view class="container_main_ls">
				<view class="u-font-u-font-32">
					选择充值套餐
				</view>
				<view class="u-m-t-18">
					<u-scroll-list :indicator="false">
						<view class="u-flex">
							<view class="container_main_ls_item"
								:class="data.current == index ? 'container_main_ls_item--active' :''"
								v-for="(item, index) in data.list" :key="index" @click="change(item,index)">
								<u-image class="container_main_ls_item_image" src="/static/personal/recommend.png"
									width="90" mode="widthFix" v-if="item.recommend"></u-image>
								<view>
									{{item.name}}
								</view>
								<view class="container_main_ls_item_money">
									￥{{item.expense}}
								</view>
							</view>
						</view>
					</u-scroll-list>
				</view>
			</view>
			<u-gap height="12" bg-color="#eee"></u-gap>
			<!-- 支付信息 -->
			<view class="container_main_pay">
				<u-radio-group wrap v-model="data.value">
					<u-radio v-for="(item, index) in data.payList" :key="index" :name="item.value">
						<view class="u-flex u-row-between u-col-center">
							<u-image :src="item.image" width="50rpx" :height="item.height"></u-image>
							<view class="u-m-l-20">
								{{item.name}}
							</view>
						</view>
					</u-radio>
				</u-radio-group>
			</view>
		</view>
		<view class="container_btm">
			<view>
				应付金额：<text>￥{{data.amount}}</text>
			</view>
			<view class="container_btm_pay" @click="$u.throttle(paySubmit, 1000)">立即支付</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onReady,
		onLoad
	} from '@dcloudio/uni-app'
	const data = reactive({
		height: null,
		member_points: 0,
		list: [],
		current: 0,
		// #ifdef MP-WEIXIN
		payList: [{
			name: '微信支付',
			image: '/static/personal/wxPay.png',
			height: '42rpx',
			value: 1
		}],
		// #endif
		// #ifndef MP-WEIXIN 
		payList: [{
				name: '微信支付',
				image: '/static/personal/wxPay.png',
				height: '42rpx',
				value: 1
			},
			{
				name: '支付宝支付',
				image: '/static/personal/zfbPay.png',
				height: '50rpx',
				value: 2
			}
		],
		// #endif
		// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
		value: 1,
		// 支付信息
		submitData: {
			service_type: 'points',
			service_id: 0,
			payment: 'wxpay'
		},
		// 应付金额
		amount: 0,
	})
	onReady(() => {
		getNavHeight()
	})
	onLoad(() => {
		getServiceList()
	})
	/* 选择服务 */
	const change = (item, index) => {
		data.current = index
		data.submitData.service_id = item.id
		data.amount = item.expense
	}
	// 拉起支付
	const paySubmit = async () => {
		data.submitData.payment = data.value == 1 ? 'wxpay' : 'alipay'
		let orderInfo = await uni.$u.api.company_pay(data.submitData)
		if (orderInfo.pay_status == 1) {
			uni.$u.toast('支付成功')
			setTimeout(() => {
				uni.$u.route({
					type: 'redirect',
					url: 'pages/pagesPersonal/integral/serve/serve'
				})
			}, 500)
		} else {
			// #ifndef H5
			// 拉起收银台
			uni.requestPayment({
				provider: data.submitData.payment,
				orderInfo: orderInfo.parameter, //微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
				success(res) {
					uni.$u.toast('支付成功')
					setTimeout(() => {
						uni.$u.route('pages/pagesPersonal/integral/serve/serve')
					}, 500)
				},
				fail(err) {
					uni.$u.toast('您已取消支付')
				}
			});
			// #endif
			// #ifdef H5
			uni.$u.toast('暂不支持')
			// #endif

		}
	}
	// 获取积分套餐列表
	const getServiceList = async () => {
		let res = await uni.$u.api.company_pointsList()
		data.list = res.items
		data.member_points = res.member_points
		data.amount = data.list[0].expense
		data.submitData.service_id = data.list[0].id
	}
	const getNavHeight = async () => {
		let res = await uni.$u.getRect('.container_image')
		// #ifndef MP-WEIXIN
		if (uni.$u.os() == 'ios') {
			data.height = res.height - uni.$u.sys().statusBarHeight + 'px'
		} else {
			data.height = res.height - uni.$u.sys().statusBarHeight - 20 + 'px'
		}
		// #endif
		// #ifdef MP-WEIXIN
		let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
		data.height = res.height - menuButtonInfo.height - uni.$u.sys().statusBarHeight + 'px'
		// #endif
		// #ifdef H5
		data.height = res.height - 44 + 'px'
		// #endif
	}
</script>

<style lang="scss" scoped>
	.container {
		&_image {
			background-size: 100% 100%;
			width: 100vw;
			height: calc(var(--status-bar-height) + 412rpx);
			position: absolute;
			top: 0;
			background-image: url('https://zhaopin.mazhoudao.com/static/buyIntegral.png');
			z-index: 1;
			color: #fff;
			font-size: 28rpx;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: center;
			padding-left: 56rpx;
			padding-top: var(--status-bar-height);
		}

		&_main {
			color: #101010;
			font-size: 32rpx;
			position: fixed;
			top: 50rpx;
			z-index: 9;
			left: 0;
			right: 0;

			&_ls {
				padding: 34rpx 66rpx 24rpx;
				background-color: #fff;
				border: 2rpx solid #fff;
				border-top-left-radius: 50rpx;
				border-top-right-radius: 50rpx;

				&_item {
					border: 2rpx solid #D77E1C;
					width: 240rpx;
					height: 200rpx;
					margin-right: 40rpx;
					text-align: center;
					position: relative;
					display: flex;
					flex-direction: column;
					justify-content: center;
					color: #101010;
					font-size: 28rpx;

					&--active {
						background-color: #FFF4F4;
					}

					&_image {
						position: absolute;
						left: 0;
						top: 0;
					}

					&_money {
						color: #CB3030;
						font-size: 28rpx;
						margin-top: 16rpx;
					}
				}
			}

			&_pay {
				padding: 0 46rpx;

				:deep(.u-checkbox) {
					display: block
				}

				:deep(.u-radio-group) {
					width: 100%;

					.u-radio {
						flex-direction: row-reverse;
						justify-content: space-between;
						padding: 40rpx 0;

						.u-radio__label {
							font-size: 28rpx !important
						}
					}

					.u-radio:nth-child(1) {
						border-bottom: 2rpx solid #BBBBBB;
					}
				}
			}
		}

		&_btm {
			position: fixed;
			bottom: 0;
			/* #ifdef MP-WEIXIN */
			padding-bottom: env(safe-area-inset-bottom);
			/* #endif */
			left: 0;
			right: 0;
			margin: auto;
			padding: 0 38rpx;
			background-color: #fff;
			height: 134rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			z-index: 9999;
			border-top: 2rpx solid #bbb;
			font-size: 32rpx;

			text {
				color: #CB3030;
			}

			&_pay {
				background-color: #F9514F;
				color: #fff;
				font-size: 28rpx;
				width: 184rpx;
				height: 60rpx;
				text-align: center;
				line-height: 60rpx;
				border-radius: 10rpx;
			}
		}
	}
</style>